<template>
  <div class="app-container" v-loading="loading">
    <el-row :gutter="10">
      <el-col :span="19">
        <other-template-base :detail-info="form" @managerCustomer="managerCustomer"></other-template-base>
        <other-template-content :detail-info="form"></other-template-content>
      </el-col>
      <el-col :span="5">
        <!--                <other-template-approval-info v-if="form.isCustomerTemplate==2 && form.approvalStatus!=0" :flows="flowList"></other-template-approval-info>-->
        <flow-record v-if="form.flowId" :id="form.flowId" :custom-style="customerStyle"></flow-record>
        <operation-record :logs="logs"></operation-record>
      </el-col>
    </el-row>

    <div class="card-wrap flex justify-end card-padding">
      <el-button @click="back">返回</el-button>
    </div>
    <manager-customer v-if="form.isCustomerTemplate==1" ref="managerCustomer" :view-type="1" @success="selectCustomerSuccess"></manager-customer>
  </div>
</template>

<script>
import OtherTemplateBase from "@/views/contractTemplate/components/otherTemplate/OtherTemplateBase.vue";
import OtherTemplateContent from "@/views/contractTemplate/components/otherTemplate/OtherTemplateContent.vue";
import ManagerCustomer from "@/views/contractTemplate/components/ManagerCustomer.vue";
import OtherTemplateApprovalInfo from "@/views/contractTemplate/otherTemplate/components/OtherTemplateApprovalInfo.vue";
import OperationRecord from "@/views/contractTemplate/components/OperationRecord.vue";
import * as contractTemplateApi from "@/api/contractTemplate/otherContractTemplate";

export default {
  dicts: ['other_contract_template_type', 'business_yes_no', 'approval_status'],
  components: {OtherTemplateApprovalInfo, OtherTemplateContent, OtherTemplateBase, ManagerCustomer, OperationRecord},
  data() {
    return {
      loading: false,
      form: {},
      flowList: [],
      customerStyle: 'margin:0 0 20px',
      logs: []
    }
  },
  computed: {},
  methods: {
    //合同详情
    getContractTemplateDetail() {
      this.loading = true
      contractTemplateApi.contractTemplateDetails(this.$route.query.id).then(res => {
        this.form = res.data;
        if (this.form.templateClassification == 1) {
          this.$set(this.form, 'customerIds', this.form.relatedCustomers?.split(','))
        }
        // if(this.form.approvalStatus != 0){
        //     this.getFlowRecord()
        // }
        this.$forceUpdate()
        console.log('合同详情-----', this.form)
      }).finally((f) => {
        this.loading = false
      })
    },
    //获取审批进度
    getFlowRecord() {
      contractTemplateApi.getFlowRecord(this.$route.query.id).then(res => {
        this.flowList = res.data;
      })
    },
    //获取操作记录
    getLog() {
      contractTemplateApi.contractTemplateLog(this.$route.query.id).then(res => {
        this.logs = res.data;
      })
    },
    //关联客户
    managerCustomer() {
      const customerIds = this.form.relatedCustomers?.split(',')
      this.$refs.managerCustomer.show('', this.form.id, customerIds)
    },
    //关联客户回调
    selectCustomerSuccess() {
      this.getContractTemplateDetail()
    },
    back() {
      this.$router.back()
      this.$store.dispatch('tagsView/delView', this.$route)
    }

  },
  created() {
    if (this.$route.query.id) {
      this.getContractTemplateDetail()
      this.getLog()
    }
  },

}
</script>

<style lang="scss" scoped>


.suggestionInfo {
  position: relative;

  .apprvalStatus {
    position: absolute;
    top: 10px;
    right: 40px;
    width: 80px;
    height: 80px;
    font-size: 14px;
    text-align: center;
    border-radius: 40px;

    &.active0 {
      color: #1890FF;
      border: #1890FF solid 1px;
    }

    &.active1 {
      color: orange;
      border: orange solid 1px;
    }

    &.active2 {
      color: red;
      border: red solid 1px;
    }

    &.active3 {
      color: green;
      border: green solid 1px;
    }
  }
}

</style>
